<%--
  Created by IntelliJ IDEA.
  User: 86180
  Date: 2021/2/4
  Time: 8:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>

<html class="app-ui">

<head>
    <!-- Meta -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

    <!-- Document title -->
    <title>我的购物车</title>

    <meta name="description" content="AppUI - Frontend Template & UI Framework" />
    <meta name="robots" content="noindex, nofollow" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css">
    <!-- Favicons -->
    <link rel="apple-touch-icon" href="${pageContext.request.contextPath}/assets/img/favicons/apple-touch-icon.png" />
    <link rel="icon" href="${pageContext.request.contextPath}/assets/img/favicons/favicon.ico" />

    <!-- AppUI CSS stylesheets -->
    <link rel="stylesheet" id="css-font-awesome" href="${pageContext.request.contextPath}/assets/css/font-awesome.css" />
    <link rel="stylesheet" id="css-ionicons" href="${pageContext.request.contextPath}/assets/css/ionicons.css" />
    <link rel="stylesheet" id="css-bootstrap" href="${pageContext.request.contextPath}/assets/css/bootstrap.css" />
    <link rel="stylesheet" id="css-app" href="${pageContext.request.contextPath}/assets/css/app.css" />
    <link rel="stylesheet" id="css-app-custom" href="${pageContext.request.contextPath}/assets/css/app-custom.css" />
    <!-- End Stylesheets -->
</head>
<body class="app-ui layout-has-fixed-header">
<div class="app-layout-canvas">
    <div class="app-layout-container">

        <!-- Header -->
        <header class="app-layout-header">
            <nav class="navbar navbar-default col-lg-offset-1">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar-collapse"
                                aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
                            <span class="sr-only">Toggle drawer</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="javascript:void(0)">
                            <img class="img-responsive" src="${pageContext.request.contextPath}/assets/img/logo/logo-frontend.png" title="强强组合商城" alt="AppUI" />
                        </a>
                    </div>

                    <div class="collapse navbar-collapse" id="header-navbar-collapse">
                        <ul id="main-menu" class="nav navbar-nav navbar-left">

                            <li class="active">
                                <a href="${pageContext.request.contextPath}/jsp/home/frontend_home.jsp">首页</a>
                            </li>

                            <li>
                                <a href="frontend_about.html">关于</a>
                            </li>

                            <li>
                                <a href="frontend_pricing.html">Pricing</a>
                            </li>

                            <li>
                                <a href="frontend_team.html">Team</a>
                            </li>

                            <li class="dropdown">
                                <a href="#" data-toggle="dropdown">分类 <span class="caret"></span></a>
                                <ul class="dropdown-menu">

                                    <li>
                                        <a href="frontend_search.html">Search</a>
                                    </li>

                                    <li>
                                        <a href="frontend_support.html">Support</a>
                                    </li>

                                    <li>
                                        <a href="frontend_contact.html">Contact</a>
                                    </li>

                                    <li>
                                        <a href="frontend_login_signup.html">Login / Signup</a>
                                    </li>

                                    <li>
                                        <a href="frontend_400.html">Error 400</a>
                                    </li>

                                </ul>
                            </li>

                        </ul>
                        <!-- .navbar-left -->

                        <ul class="nav navbar-nav navbar-right navbar-toolbar hidden-sm hidden-xs w-30">
                            <li class="active" id="business">
                                <a href="frontend_home.html">注册为商家</a>
                            </li>
                            <li class="active" id="deliver">
                                <a href="frontend_home.html">注册为配送员</a>
                            </li>
                            <li class="dropdown">
                                <a href="javascript:void(0)" data-toggle="dropdown"><i class="ion-ios-bell"></i> <span class="badge">3</span></a>
                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li class="dropdown-header">消息</li>
                                    <li>
                                        <a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">3</span> 有无内鬼？ </a>
                                    </li>
                                    <li>
                                        <a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">1</span> 不过如此 </a>
                                    </li>
                                    <li class="divider"></li>
                                    <li class="dropdown-header">公告</li>
                                    <li>
                                        <a tabindex="-1" href="javascript:void(0)">登dua郎..</a>
                                    </li>
                                </ul>
                            </li>

                            <li class="dropdown dropdown-profile">
                                <a href="javascript:void(0)" data-toggle="dropdown">
                                    <span class="m-r-sm">${account.accName}<span class="caret"></span></span>
                                    <img class="img-avatar img-avatar-48" src="${pageContext.request.contextPath}/file/acc/${account.accImg == null?"000000011612245316757212.png":account.accImg}" alt="User profile pic" />
                                </a>
                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li>
                                        <a href="${pageContext.request.contextPath}/jsp/MyAccount/MyMoneyRecord.jsp">个人账户</a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0)">我的购物车</a>
                                    </li>
                                    <li>
                                        <a href="#" id="logout">退出</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <!-- .navbar-right -->
                    </div>
                </div>
                <!-- .container-fluid -->
            </nav>
            <!-- .navbar -->
        </header>
        <br />
        <br />
        <br />
        <!-- End header -->

        <main class="app-layout-canvas">

            <!-- Page Content -->
            <div class="container-fluid p-y-md">
                <!-- Dynamic Table Full -->
                <div class="card col-md-10 col-lg-offset-1">
                    <div class="card-header">
                        <h4>我的购物车</h4>
                    </div>
                    <div class="card-block" id="card_bookInfo">
                        <!-- DataTables init on table by adding .js-dataTable-full class, functionality initialized in js/pages/base_tables_datatables.js -->
                        <table class="table table-bordered table-striped table-vcenter">
                            <thead>
                            <tr>
                                <th class="text-center">全选&nbsp;<label class="css-input css-checkbox css-checkbox-primary">
                                    <input type="checkbox" class="selectAll"><span></span>
                                </label></th>
                                <th class="text-center">宝贝</th>
                                <th class="hidden-xs" style="width: 14%;">单价</th>
                                <th class="hidden-xs">数量</th>
                                <th class="text-center" style="width: 14%;">金额</th>
                                <th class="hidden-xs" style="width: 10%;">操作</th>
                            </tr>
                            </thead>
                            <tbody id='buyGoodsContent'>
                            <tr>
                                <td class='text-center'>
                                    <label class="css-input css-checkbox css-checkbox-primary">
                                        <input type="checkbox" checked=""><span></span>
                                    </label>
                                </td>
                                <td class='font-500'>
                                    <img class="col-md-6" src="${pageContext.request.contextPath}/assets/img/photos/m4.jpg" style="width: 100px;height: 60px;" />
                                    <span class="col-md-6"> 衣服</span>
                                    <span class="col-md-6"> 买到就是赚到,买到就是赚到,买到就是赚到,买到就是赚到</span>
                                </td>
                                <td class='font-500'>
                                    ￥<span> 1,000,000</span>
                                </td>
                                <td class='font-500'>
                                    <input type="number" style="width: 50px;" value="1" />
                                </td>
                                <td class='font-500'>
                                    ￥<span> 1,000,000</span>
                                </td>
                                <td class='font-500'>
                                    <button class="btn btn-app-red deleteBuyCart" type="button" data-toggle="tooltip" title="Remove Client"
                                            value="9">移除&nbsp;<i class="ion-close"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td class='text-center'>
                                    <label class="css-input css-checkbox css-checkbox-primary">
                                        <input type="checkbox"><span></span>
                                    </label>
                                </td>
                                <td class='font-500'>
                                    <img class="col-md-6" src="${pageContext.request.contextPath}/assets/img/photos/m4.jpg" style="width: 100px;height: 60px;" />
                                    <span class="col-md-6"> 衣服</span>
                                    <span class="col-md-6"> 买到就是赚到,买到就是赚到,买到就是赚到,买到就是赚到</span>
                                </td>
                                <td class='font-500'>
                                    ￥<span> 1,000,000</span>
                                </td>
                                <td class='font-500'>
                                    <input type="number" style="width: 50px;" value="1" />
                                </td>
                                <td class='font-500'>
                                    ￥<span> 1,000,000</span>
                                </td>
                                <td class='font-500'>
                                    <button class="btn btn-app-red deleteBuyCart" type="button" data-toggle="tooltip" title="Remove Client"
                                            value="9">移除&nbsp;<i class="ion-close"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td class='text-center'>
                                    <label class="css-input css-checkbox css-checkbox-primary">
                                        <input type="checkbox"><span></span>
                                    </label>
                                </td>
                                <td class='font-500'>
                                    <img class="col-md-6" src="${pageContext.request.contextPath}/assets/img/photos/m4.jpg" style="width: 100px;height: 60px;" />
                                    <span class="col-md-6"> 衣服</span>
                                    <span class="col-md-6"> 买到就是赚到,买到就是赚到,买到就是赚到,买到就是赚到</span>
                                </td>
                                <td class='font-500'>
                                    ￥<span> 1,000,000</span>
                                </td>
                                <td class='font-500'>
                                    <input type="number" style="width: 50px;" value="1" />
                                </td>
                                <td class='font-500'>
                                    ￥<span> 1,000,000</span>
                                </td>
                                <td class='font-500'>
                                    <button class="btn btn-app-red deleteBuyCart" type="button" data-toggle="tooltip" title="Remove Client"
                                            value="9">移除&nbsp;<i class="ion-close"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td class='text-center'>
                                    <label class="css-input css-checkbox css-checkbox-primary">
                                        <input type="checkbox"><span></span>
                                    </label>
                                </td>
                                <td class='font-500'>
                                    <img class="col-md-6" src="${pageContext.request.contextPath}/assets/img/photos/m4.jpg" style="width: 100px;height: 60px;" />
                                    <span class="col-md-6"> 衣服</span>
                                    <span class="col-md-6"> 买到就是赚到,买到就是赚到,买到就是赚到,买到就是赚到</span>
                                </td>
                                <td class='font-500'>
                                    ￥<span> 1,000,000</span>
                                </td>
                                <td class='font-500'>
                                    <input type="number" style="width: 50px;" value="1" />
                                </td>
                                <td class='font-500'>
                                    ￥<span> 1,000,000</span>
                                </td>
                                <td class='font-500'>
                                    <button class="btn btn-app-red deleteBuyCart" type="button" data-toggle="tooltip" title="Remove Client"
                                            value="9">移除&nbsp;<i class="ion-close"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td class='text-center'>
                                    <label class="css-input css-checkbox css-checkbox-primary">
                                        <input type="checkbox"><span></span>
                                    </label>
                                </td>
                                <td class='font-500'>
                                    <img class="col-md-6" src="${pageContext.request.contextPath}/assets/img/photos/m4.jpg" style="width: 100px;height: 60px;" />
                                    <span class="col-md-6"> 衣服</span>
                                    <span class="col-md-6"> 买到就是赚到,买到就是赚到,买到就是赚到,买到就是赚到</span>
                                </td>
                                <td class='font-500'>
                                    ￥<span> 1,000,000</span>
                                </td>
                                <td class='font-500'>
                                    <input type="number" style="width: 50px;" value="1" />
                                </td>
                                <td class='font-500'>
                                    ￥<span> 1,000,000</span>
                                </td>
                                <td class='font-500'>
                                    <button class="btn btn-app-red deleteBuyCart" type="button" data-toggle="tooltip" title="Remove Client"
                                            value="9">移除&nbsp;<i class="ion-close"></i></button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="text-center card bg-gray-lighter col-md-8" style="overflow: hidden;height: 50px; width:98%;position:fixed;bottom:0;left:16px;">
                            <div class="col-md-3 left" style="left: 25px;">
                                <label class="css-input css-checkbox css-checkbox-primary">
                                    <input type="checkbox" class="selectAll"><span></span>
                                </label>全选
                            </div>
                            <div class="col-md-2" style="top: 10px;">
                                <a href="javascript:void(0)" id="deleteOptionGoods"> 删除</a>
                            </div>
                            合计：￥<span id="allTotalPrice">0</span>（不包含运费）
                            &nbsp;&nbsp;&nbsp;<button class="btn btn-app-red buyGoods" type="button" data-toggle="tooltip" title="火速发货" style="height: 50px;">结算&nbsp;&nbsp;<i class="	fa fa-qrcode"></i></button>
                        </div>
                    </div>
                    <!-- .card-block -->
                </div>
            </div>

        </main>


    </div>
    <!-- .app-layout-container -->
</div>

<!-- AppUI Core JS: jQuery, Bootstrap, slimScroll, scrollLock and App.js -->
<script src="${pageContext.request.contextPath}/assets/js/core/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/core/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/core/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/core/jquery.scrollLock.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/core/jquery.placeholder.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/app.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/app-custom.js"></script>

<!-- Page JS Code -->
<script type="text/javascript">
    $(function() {
        var accId = ${account.accId};
        getBuyCartInfo();//获取购物车信息

        function getBuyCartInfo() {
            //使原来的复选框继续选择
            var optionGoods = $(".optionGoods");
            var option= new Array();
            for (var i = 0; i < optionGoods.length; i++) {
                if ($(optionGoods[i]).prop("checked") == true){
                    option.push(i);
                }
            }
            //获取购物车信息
            var url = "${pageContext.request.contextPath}/shopCart/selectShopCartByAccId";
            var param = {
                accId:accId
            };
            $.get(url,param,function (data) {
                if (data.code == 1001){
                    $("#buyGoodsContent").html("");
                    var content = "";
                    for (var i = 0; i < data.shopCars.length; i++) {
                        content += "<tr><td class='text-center'><label class='css-input css-checkbox css-checkbox-primary'><input type='checkbox' class='optionGoods' abc='"+data.shopCars[i].shopCarId+"' goIds='"+data.shopCars[i].goId+"' value='"+data.shopCars[i].totalPri+"' /><span></span></label></td><td class='font-500'>";
                        content += "<img class='col-md-6' src='${pageContext.request.contextPath}/file/goodsInfo/"+data.shopCars[i].imgUrl+"' style='width: 100px;height: 60px;' />";
                        content += "<span class='col-md-6'> "+data.shopCars[i].goNm+"</span>";
                        content += "<span class='col-md-6'> "+data.shopCars[i].goDp+"</span></td><td class='font-500'>";
                        content += "￥<span> "+data.shopCars[i].goPri+"</span></td>";
                        content += "<td class='font-500'><input type='number' style='width: 50px;' value='"+data.shopCars[i].goNum+"' class='asd' cartId='"+data.shopCars[i].shopCarId+"' /></td>";
                        content += "<td class='font-500'>￥<span> "+data.shopCars[i].totalPri+"</span></td>";
                        content += "<td class='font-500'><button class='btn btn-app-red deleteBuyCart' type='button' data-toggle='tooltip' title='移除' value='"+data.shopCars[i].shopCarId+"'>移除&nbsp;<i class='ion-close'></i></button></td></tr>";
                    }
                    $("#buyGoodsContent").html(content);
                    optionGoods = $(".optionGoods");
                    for (var i = 0; i < option.length; i++) {//使原来的复选框继续选择
                        $(optionGoods[option[i]]).prop("checked",true);
                    }
                    setTotalPrice();
                }
            });
        }
        /*  移除购物车--start   */
        $("#buyGoodsContent").delegate(".deleteBuyCart","click",function () {
            var con = confirm("你确定删除吗？");
            if (con == false){
                return false;
            }
            var shopCarId = $(this).val();
            var url = "${pageContext.request.contextPath}/shopCart/deleteShopCartByShopCartId";
            var param = {
                shopCarId:shopCarId,
                _method:"delete"
            };
            $.post(url,param,function (data) {
                if (data.code == 1001){
                    alert("删除成功！");
                    getBuyCartInfo();
                }
            });
        });
        /*  移除购物车--end   */

        /*  修改购买数量--start  */
        $("#buyGoodsContent").delegate(".asd","change",function () {
            if ($(this).val() <= 0) {
                $(this).val(1);
                return false;
            }
            var shopCarId = $(this).attr("cartId");
            var url = "${pageContext.request.contextPath}/shopCart/editShopGoodsNum";
            var param = {
                shopCarId:shopCarId,
                goNum:$(this).val(),
                _method:"put"
            }
            $.post(url,param,function (data) {
                if (data.code == 1002){
                    alert("错误代码100000000000000001");
                }else {
                    getBuyCartInfo();//获取购物车信息
                }
            });
        });
        /*  修改购买数量--end  */

        /*  设置总价钱方法--start  */
        function setTotalPrice(){
            var optionGoods = $(".optionGoods");
            let totalPrice = 0;
            for (var i = 0; i < optionGoods.length; i++) {
                if ($(optionGoods[i]).prop("checked") == true){
                    //计算商品总价
                    let NUM = $(optionGoods[i]).val();
                    totalPrice = eval(totalPrice +"+"+ NUM);
                }
            }
            $("#allTotalPrice").html(totalPrice);
        }
        /*  设置总价钱方法--end  */
        //全选/全不选的操作
        $(".selectAll").click(function(){
            if($(this).prop("checked") == true){ //表示全选按钮被选中
                $(".selectAll").prop("checked",true);//其余的复选框全部选中
                $(".optionGoods").prop("checked",true);//其余的复选框全部选中
                setTotalPrice();
            }else{
                $(".selectAll").prop("checked",false);//其余的复选框全不选中
                $(".optionGoods").prop("checked",false);//其余的复选框全不选中
                $("#allTotalPrice").html(0);
            }

        });

        /*  删除选择的商品--start */
        $("#deleteOptionGoods").click(function () {
            var con = confirm("你确定删除吗？");
            if (con == false){
                return false;
            }
            var optionGoods = $(".optionGoods");
            var shopCartIds = "";
            for (var i = 0; i < optionGoods.length; i++) {
                if ($(optionGoods[i]).prop("checked") == true){
                    shopCartIds = shopCartIds +","+$(optionGoods[i]).attr("abc");
                }
            }
            var shopCartId = shopCartIds.split(",");
            shopCartIds = shopCartId[1];
            for (var i = 2; i < shopCartId.length; i++) {
                shopCartIds = shopCartIds + "," + shopCartId[i];
            }
            var url = "${pageContext.request.contextPath}/shopCart/deleteShopCartByShopCartIdString";
            var param = {
                shopCarIdString:shopCartIds,
                _method: "delete"
            };
            $.post(url,param,function (data) {
                if (data.code == 1001){
                    alert("删除成功!");
                    getBuyCartInfo();
                }
            });
        });
        /*  删除选择的商品--end */

        /*  选择商品--star    */
        $("#buyGoodsContent").delegate(".optionGoods","click",function () {
            setTotalPrice();
        });
        /*  选择商品--end    */
        
        /*  购买--start   */
        $(".buyGoods").click(function () {
            var optionGoods = $(".optionGoods");
            var goIds = "";
            for (var i = 0; i < optionGoods.length; i++) {
                if ($(optionGoods[i]).prop("checked") == true){
                    goIds = goIds +","+$(optionGoods[i]).attr("goIds");
                }
            }
            if (goIds == ''){
                return false;
            }
            var goId = goIds.split(",");
            goIds = goId[1];
            for (var i = 2; i < goId.length; i++) {
                goIds = goIds + "," + goId[i];
            }
            var url = "${pageContext.request.contextPath}/goods/buyGoodsByAccIdAndGoId";
            var param = {
                accId:accId,
                goIdString:goIds,
                _method:"put"
            };
            $.post(url,param,function (data) {
                if (data.code == 1001){
                    window.location.href = "${pageContext.request.contextPath}/jsp/MyOrder/ensure_order.jsp?ordId="+data.ordId;
                }
            });
        });
        /*  购买--end   */

        /*动态显示首页头部*/
        var role = ${account.role};
        if(role == 2){
            $("#business").html("<a href='../business/UnFinishOrder.jsp'>商家后台</a>");
            $("#deliver").html("");
        }
        if(role == 3){
            $("#business").html("");
            $("#deliver").html("<a href='#'>配送员后台</a>");
        }

        //模态框居中问题 start
        function centerModals() {
            $('.modal').each(function(i) {
                var $clone = $(this).clone().css('display', 'block').appendTo('body');
                var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
                top = top > 50 ? top : 0;
                $clone.remove();
                $(this).find('.modal-content').css("margin-top", top - 50);
            });
        }
        // 在模态框出现的时候调用垂直居中方法
        $('.modal').on('show.bs.modal', centerModals);
        // 在窗口大小改变的时候调用垂直居中方法
        $(window).on('resize', centerModals);
        //模态框居中问题end
    });
</script>
</body>
</html>
